<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <!-- <div class="title">分值分析</div>
          <rz-height></rz-height>
          <div class="line">
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </div>
            <div class="right">
                <tips :type="4"></tips>

              <div>{{ data.spcjScore }}/{{ data.spcjTotalScore }}分</div>
              <div>得分/总分值</div>
            </div>
          </div>
          <rz-height></rz-height>
          <div class="line">
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </div>
            <div class="right">
              <div>今日累计扣{{ data.spcjTrend }}分</div>
            </div>
          </div> -->
          <div class="tips">
            <div class="title">分值分析</div>
            <tips type="4"/>
          </div>
          <score-interpretation
            ScoreType="spcjScore"
            totalScore="spcjTotalScore"
          ></score-interpretation>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="always">
          <div class="title">近10天食安指数分析</div>
          <rz-height></rz-height>
          <div class="food_line"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <rz-height></rz-height>
    <rz-height></rz-height> -->
    <!-- <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <div class="dialog_titel">
            <div class="title">食品抽检记录列表</div>
          </div>
          <rz-height></rz-height>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="createTimeStr" label="添加日期" width="180">
            </el-table-column>
            <el-table-column
              prop="reasonReason"
              label="评估原因及理由"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="score" label="扣分分值">
              <template slot-scope="scope">
                <div>{{ scope.row.score }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="operator" label="操作人"> </el-table-column>
            <el-table-column prop="source" label="部门名称"> </el-table-column>
            <el-table-column prop="score" label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="primary">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            :total="total"
            @pagination="recordRindListByCondition"
            :page.sync="query.page"
          />
        </el-card>
      </el-col>
    </el-row> -->
    <rz-height></rz-height>
    <rz-height></rz-height>
<spot-check/>

    <rz-height></rz-height>
    <rz-height></rz-height>

    <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <div class="dialog_titel">
            <div class="title">食品抽检扣分记录列表</div>
          </div>
          <rz-height></rz-height>
          <el-row>
            <el-col :span="5">
              <el-date-picker
                v-model="buckleQuery.startDate"
                :picker-options="$pickerOptions"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  buckleQuery.page = 1;
                  recordRindListByConditionBuckle();
                "
                >查询</el-button
              >
            </el-col>
          </el-row>
          <rz-height></rz-height>
          <el-table :data="buckleData" style="width: 100%" border v-loading="loading">
            <el-table-column prop="createTimeStr" label="添加日期" width="180">
            </el-table-column>
            <el-table-column prop="reasonReason" label="扣分详情">
            </el-table-column>
            <el-table-column prop="score" label="扣分分值" width="100">
              <template slot-scope="scope">
                <div>{{ scope.row.score }}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="buckleTotal"
            @pagination="recordRindListByConditionBuckle"
            :page.sync="buckleQuery.page"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
var echarts = require("echarts");
import {
  findByFSuperviseunitId,
  recordRindListByCondition,
  findListByConditionSafety,
} from "@/api/modules/interpretation";
import addDialog from "@/views/interpretation/components/addDialog";
import tips from "@/views/interpretation/components/tips";
import scoreInterpretation from "@/views/interpretation/components/scoreInterpretation";

export default {
  // props:[],
  // 页面加载
  created() {
    this.buckleQuery.startDate = this.$moment().subtract(1, "days").format("YYYY-MM-DD")
      // this.getList();
      // this.recordRindListByCondition();
    this.findListByConditionSafety();
    this.recordRindListByConditionBuckle()
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      // tableData: [],
      // data: {},
      recordList: [],
      // query: {
      //   category: 5,
      //   endDate: "",
      //   fsuperviseunitId: sessionStorage.getItem("interpretation"),
      //   isPage: 0,
      //   page: 1,
      //   pageSize: 10,
      //   startDate: "",
      //   type: 2,
      // },
      // total: 0,
      buckleQuery: {
        category: 5,
        endDate: "",
        fsuperviseunitId: sessionStorage.getItem("interpretation"),
        isPage: 0,
        page: 1,
        pageSize: 10,
        startDate: "",
        type: 1,
      },
      buckleData: [],
      buckleTotal: 0,
      loading:false,
    };
  },
  // 方法
  methods: {
    // getList() {
    //   findByFSuperviseunitId({
    //     params: {
    //       fSuperviseunitId: sessionStorage.getItem("interpretation"),
    //     },
    //   }).then((res) => {
    //     this.data = res.data;
    //   });
    // },
    // recordRindListByCondition() {
    //   recordRindListByCondition(this.query).then((res) => {
    //     this.tableData = res.data;
    //     this.total = res.totalCount;
    //     // this.lineInit();
    //   });
    // },
    recordRindListByConditionBuckle() {
      if (!this.buckleQuery.startDate) {
        this.buckleQuery.startDate = "";
      }
      this.buckleQuery.endDate = this.buckleQuery.startDate;
      this.loading=true
      recordRindListByCondition(this.buckleQuery).then((res) => {
          this.loading=false
        this.buckleData = res.data;
        this.buckleTotal = res.totalCount;
      });
    },
    lineInit() {
      let chartDom = document.querySelector(".food_line");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "5%",
          right: "8%",
          bottom: "3%",
      top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.recordList.map((x) => x.createTimeStr).reverse(),
          axisLabel: {    //底部文字倾斜
                    interval: 0,
                    rotate:25
                },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
             itemStyle : { normal: {label : {show: true}}},

            type: "line",
            name: "食品抽检",
            data: this.recordList.map((x) => x.spcjScore).reverse(),
          },
        ],
      };
      myChart.setOption(option);
    },
    findListByConditionSafety() {
      findListByConditionSafety({
        fSuperviseunitId: sessionStorage.getItem("interpretation"),
        indexYear: new Date().getFullYear(),
        startDate: this.$moment().subtract(95, "day").format("YYYY-MM-DD"),
        endDate: this.$moment().format("YYYY-MM-DD"),
        isReverseTimeOrder: "1",
      }).then((res) => {
        this.recordList = res.data;
        this.lineInit();
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    "add-dialog": addDialog,
    "score-interpretation": scoreInterpretation,
      "spotCheck":() => import("@/views/enterprise/home/spotCheck"),
    tips,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
// .line {
//   display: flex;
//   background-color: #99cc66;
//   color: #fff;
//   .left {
//     width: 100px;
//     height: 100px;
//     background-color: red;
//   }
//   .right {
//       position: relative;
//     display: flex;
//     padding-left: 20px;
//     justify-content: space-evenly;
//     flex: 1;
//     align-items: flex-start;
//     flex-direction: column;
//   }
// }
.tips {
  position: relative;
}
.dialog_titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 20px;
    font-weight: 700;
  }
}
.food_line {
  height: 210px;
  width: 100%;
}
</style>